<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>forEach&&filter&&map解析与构造</title>
</head>
<body>
  <p class="J_nav">
    <a href="#" data-field="all">全部</a>
    <a href="#" data-field="nan">男</a>
    <a href="#" data-field="nv">女</a>
  </p>
  <ul class="J_list">
    
  </ul>

  
  <script src="./js/utils.js"></script>
  <script type="text/html" id="J_tpl">
    <li>{{course}}<hr /></li>
  </script>
  <script>
    var value = [
      {
        "name": "张三",
        "age": "22",
        "email": "13076682658@163.com"
      },
      {
        "name": "李四",
        "age": "23",
        "email": "13076682658@163.com"
      },
      {
        "name": "王五",
        "age": "24",
        "email": "13076682658@163.com"
      },
      {
        "name": "小明",
        "age": "21",
        "email": "13076682658@163.com"
      },
      {
        "name": "小红",
        "age": "20",
        "email": "13076682658@163.com"
      },
    ]
    
  var oli = document.getElementsByTagName('li');
  // for(var i = 0; i < value.length; i++){
  //   oli[i].innerHTML = value[i].name;
  // }
  
  // 深拷贝
  function deeClone(obj, target){
    var tar = target || {},
        toStr = Object.prototype.toString(),
        str = '[object Object]';

    for(var i in obj){
      if(obj.hasOwnProperty(i)){
        if(typeof(obj[i]) === 'object' && typeof(obj[i]) !== null){
          var num = toStr.call(obj[i]) === str ? {} : [];
          deelClone(tar[i], num);
        }else{
          tar[i] = obj[i];
        } 
      }
    }
    return tar;
  }

  //forEach
  Array.prototype.myforEach = function(fn){
    var arr = this,
        len = arr.length,
        arg2 = arguments[1] || window;
    
    for(var i = 0; i < len; i++){
      fn.apply(arg2, [arr[i], i, arr]);
    }
  }

  //过滤器 筛选
  Array.prototype.myfilter = function(fn){
    var arr = this,
        len = this.length,
        arg2 = arguments[1] || window,
        newarr = [];
    
    for(var i = 0; i < len; i++){
      var item = deeClone(arr[i]);
      fn.apply(arg2, [arr[i], i, arr]) ? newarr.push(item) : '';
    }

    return newarr;
  }

  Array.prototype.mymap = function(fn){
    var arr = this,
        len = this.length,
        arg2 = arguments[1] || window,
        newArr = [],
        item;
    for(var i = 0; i < len; i++){
      item = deeClone(arr[i]);
      newArr.push(fn.apply(arg2, [item, i, arr]));
    }

    return newArr;
  }

  value.myforEach(function(elem, index, array){
    // oli[index].innerHTML = elem.name;
    if(elem.age >= 22){
      elem.gender = "男";
    }else{
      elem.gender = "女"
    }
    
  }, {name: "李四"});
  
  var newArr = value.myfilter(function(elem, index, array){
  
    return elem.age > 23;
  })
  console.log(newArr);

  var newmap = value.mymap(function(elem, index, arr){
    
    // console.log(this);
    elem.email = "xingming " + elem.email;
    return elem;
  })
  console.log(newmap);
  console.log(value);


  ;(function(){
    var oNav = document.getElementsByClassName("J_nav")[0],
        oList = document.getElementsByClassName("J_list")[0],
        tpl = document.getElementById('J_tpl').innerHTML;

    var init = function(){
      oList.innerHTML = renderList(filterData(value, 'all'));
      bindEvent();
    }

    function bindEvent(){
      oNav.addEventListener('click', navClick, false);
    }

    function navClick(e){
      var e = e || window.event,
          tar = e.target || e.srcElement,
          tagName = tar.tagName.toLowerCase();
      // console.log(tagName); // 打印 a ?
      if(tagName === 'a'){
        var field = tar.getAttribute('data-field');
        // console.log(field);
        // console.log(filterData(value, field))

        oList.innerHTML = renderList(filterData(value, field));
      }
    }

    function renderList(data){
      var list = '';
      data.myforEach(function(elem, index, array){
        // list += tpl.replace(/{{(.*?)}}/g, function(node, key){
        //   return{
        //     course: elem.course
        //   }[key];
        // l
        // });
        list += `姓名: ${elem.name} 年龄: ${elem.age} 
                 性别: ${elem.gender}`+ "<hr />";
      });

      return list;
    }

    function filterData(data, field){
      var arr = data.myfilter(function(elem, index, array){
        switch(field){
          case "all":
            return true;
            break;
          case "nan": 
            return elem.gender === "男";
            break;
          case "nv": 
            return elem.gender === "女";
          default: 
            return true;
        }
      })

      return arr;
    }
    init();
  })()



  </script>
</body>
</html>